<template>
  <div class="products-page">
    <h1 class="page-title">商品列表</h1>
    <div class="products-grid">
      <ProductCard v-for="product in products" :key="product.id" :product="product" />
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import request from '../../util/request';
import ProductCard from './cus_card/ProdCard.vue'; // 引入商品卡片组件

export default {
  name: 'Products',
  components: {
    ProductCard,
  },
  setup() {

    const products = ref([]);

    onMounted(() => {
      request.get('/product/show').then(res => {
        const pl = res.data.pl;
        const bl = res.data.bl;
        products.value = pl.map((p, i) => ({
          ...p,
          busName: bl[i].busName
        }));
      }).catch(err => {
        message.error("获取产品列表失败：", err);
      })
    });
    return {
      products,
    }
  }
}
</script>

<style src="../../assets/styles/cusHome.css" scoped></style>